
        
        body{
            height: initial !important;
        }
        
       
        #demo-canvas{
            position: fixed;
            top:0px;
            left: 50%;
            transform:translateX(-50%);
            position: fixed;
            z-index: 2;
        }
        .shave{
            position: fixed;
            width: 100%;
            height: 100%;
            z-index: 1;
            top:0px;
            left: 0px;
            background: #28363e;
            opacity: 0;
        }

        body>.container{
            position: relative;
            z-index: 3;
        }
        header{
            transition:all ease .5s;
            z-index: 2;
        }

        header .headSwiper .head-pagination{
            bottom: 30px;
            height: 20px;
            width: 113px;
            right: 50px;
            left: initial;
        }
        header .headSwiper .head-pagination .swiper-pagination-bullet{
            width: 6px;
            height: 6px;
            border:0px solid #fff;
            background: #fff;
            box-sizing: content-box;
            margin: 0px;
            opacity: 1;
            display: block;
            float: left;
            margin-top:7px;
            margin-bottom:7px;
            outline: none;
            
        }
        header .headSwiper .head-pagination .swiper-pagination-bullet-active{
            border-width: 7px;
            margin-top:0px;
            margin-bottom:0px;
            background: #000;
        }
        header .headSwiper .head-pagination .swiper-pagination-bullet + .swiper-pagination-bullet{
            margin-left: 25px;
        }
        
        main .about .fluid .content .more,
        main .case .details .more,
        main .introduce .content .txt .more,
        main .news>.more{
            text-decoration: none;
            color: #000;
            display: inline-block;
            width: 340px;
            text-align: center;
            height: 50px;
            font-size: 14px;
            
        }
        .more{
            position: relative;
            z-index: 3;
            overflow: hidden;
        }
        
        
        .order p{
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0px;
            left: 0px;
        }
        .order .noBg{
            line-height: 50px;
            animation: noBgHoverOut .3s ease forwards;
            transform: translateY(100%);
        }
        .order:hover .noBg{
            animation-name: noBgHoverIn;
        }
        @keyframes noBgHoverIn{
            from{
                transform: translateY(0%);
            }to{
                transform: translateY(-100%);
            }
        }
        @keyframes noBgHoverOut{
            from{
                transform: translateY(100%);
            }to{
                transform: translateY(0%);
            }
        }
        .more .haveBg{
            z-index: 3;
            background: #e50012;
            transform: translateY(100%);
            opacity: 0;
            animation: haveBgHoverOut .3s ease forwards;

        }
        .more:hover .haveBg{
            animation-name: haveBgHoverIn;
        }
        .more:hover .haveBg i{
            transform: translateY(0px);
        }
        .more .haveBg i{
            display: block;
            height: 100%;
            line-height: 50px;
            color: #fff;
            font-style: normal;
            transform: translateY(10px);
            transition: transform ease-out .3s .2s;
        }
        @keyframes haveBgHoverIn{
            from{
                opacity: 0;
                transform: translateY(100%);
            }to{
                opacity: 1;
                transform: translateY(0%);
            }
        }
        @keyframes haveBgHoverOut{
            from{
                opacity: 1;
                transform: translateY(0%);
            }to{
                opacity: 0;
                transform: translateY(-100%);
            }
        }
        main .headSwiper{
            overflow: hidden;
            position: relative;
            background: #fff;
        }
        main .headSwiper .swiper-slide{
            opacity: 0;
            animation:imageAnimation 50s linear infinite 0s;
        }
        @keyframes imageAnimation{
            0%{opacity:0;animation-timing-function:ease-in}
            8%{opacity:1;transform:scale(1.05);animation-timing-function:ease-out}
            17%{opacity:1;transform:scale(1.1)}
            25%{opacity:0;transform:scale(1.1)}
            100%{opacity:0}
        }
        main .headSwiper .swiper-slide + .swiper-slide{
            position: absolute;
            width: 100%;
            height: 100%;
            top:0px;
            left:0px;
        }
        main .headSwiper .swiper-slide:nth-child(2){
            animation-delay: 10s;
        }
        main .headSwiper .swiper-slide:nth-child(3){
            animation-delay: 20s;
        }
        main .headSwiper .swiper-slide:nth-child(4){
            animation-delay: 30s;
        }
        main .headSwiper .swiper-slide:nth-child(5){
            animation-delay: 40s;
        }
        main .headSwiper .swiper-container img{
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        main .about .fluid .content .book,
        main .case .row:nth-child(1) .book,
        main .introduce .book{
            width: 300px;
            height: 385px;
            display: block;
            position: relative;
            cursor: pointer;
        }
        
        
        main .about .fluid .content .book>p,
        main .case .row:nth-child(1) .book>p,
        main .introduce .book>p{
            position: absolute;
            height: 100%;
            padding:35px 25px;
            align-items: flex-end;
            width: 100%;
            font-size: 100px;
        }
        main .about .fluid .content .book>p span,
        main .case .row:nth-child(1) .book>p span,
        main .introduce .book>p span{
            font-size: 16px;
            position: absolute;
            font-style: normal;
            left: 30px;
            line-height: 120%;
            width: 12px;
            transition: all linear .5s;
            bottom: 50%;
            transform: translateY(-20px);
        }
        main .about .fluid .content .book:hover p>span,
        main .case .row:nth-child(1) .book:hover p>span,
        main .introduce .book:hover p>span{
            color:#e50012;
        }
        
        
        main .about .fluid .content .book .auto,
        main .introduce .book .auto{
            background: #000;
        }
        main .case .row:nth-child(1) .book .auto{
            background: #fff;
        }

        main .about .fluid{
            padding-top: 80px;
            padding-bottom: 60px;
            overflow: hidden;
        }
        main .about .fluid .content{
            float: left;
            width: 46%;
        }
         main .about .fluid .content .info{
            padding-right: 35px;
        }
        main .about .fluid .content .infoTitle{
            margin-top: 50px;
        }
        main .about .fluid .content .infoTitle p{
            font-size: 24px;
            font-weight: bold;
            align-items: flex-end;
        }
        main .about .fluid .content .infoTitle p img{
            margin-right: 15px;
        }
        main .about .fluid .content .infoTitle .line{
            display: block;
            height: 1px;
            width: 40px;
            background: #000;
            margin-top: 30px;
            margin-bottom: 40px;
        }
       
        main .about .fluid .content .infoTxt p{
            margin-top: 5px;
            line-height: 170%;
            font-size: 18px;
            text-indent: 36px;
        }
        main .about .fluid .content .more{
            margin-top: 65px;
        }
        main .about .fluid .pic{
            width: 54%;
            float: left;
            padding-left: 90px;
        }
        main .about .fluid .pic .picPalace{
            position: relative;
        }
        main .about .fluid .pic .picPalace .picShadow{
            position: relative;
            z-index: 2;
        }
        main .about .fluid .pic .picPalace .picShadow img{
            width: 100%;
            height: auto;
            display: block;
        }
        main .about .fluid .pic .picPalace .border{
            z-index: 3;
        }
        main .about .fluid .pic .aboutPic{
            position: absolute;
            top:0px;
            left: 0px;
        }
        main .about .fluid .pic .tips .item{
            margin-top: 35px;
            font-size: 24px;
        }
        main .about .fluid .pic .tips .item .itemTitle{
            margin-bottom: 30px;
        }
        main .about .fluid .pic .tips .item .itemTitle span{
            height: 1px;
            width: 40px;
            background: #000;
            margin-right: 15px;
        }
        main .about .fluid .pic .tips .item p:last-child{
            font-weight: bold;
        }
        main .about .fluid .pic .tips .item:last-child{
            margin-top: 45px;
        }
        
       
       

        main .tip{
            position: relative;
            perspective:1000px;
            margin-top:150px;
            height: 100vh;
        }
        main .tip .trans{
            height: 100%;
            overflow: hidden;
            position: relative;
            transform-origin: 50% 100%;
        }
        main .tip .trans video{
            position: absolute;
            width: 100%;
            height: 100%;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            object-fit: cover;
        }
        main .tip .fluid{
            position: absolute;
            color: white;
            left: 0px;
            top: 0px;
            height: 100%;
            right: 0px;
            z-index:2;
            pointer-events: none;
        }
        main .tip .fluid .box{
            height: 50%;
            position: relative;
        }
        main .tip .fluid .box .line{
            width: 40px;
            height: 2px;
            background: #fff;
            display: block;
            margin-top: 4px;
        }
        main .tip .fluid .box .top p:nth-child(2){
            font-size: 36px;
            margin-top:40px;
            line-height: 36px;
        }
        main .tip .fluid .box .top h2,
        main .tip .fluid .box .top p:last-child{
            font-size: 54px;
            line-height: 54px;
            margin-top: 20px;
        }
        main .tip .fluid .box .top{
            position: absolute;
            bottom: 0px;
        }
        main .tip .fluid .box .bottom p{
            font-size: 14px;
            line-height: 190%;
            margin-top:20px;
        }
        main .tip .fluid .box .bottom p,
        main .tip .fluid .box .bottom i{
            margin-left: 20px;
        }
        main .tip .fluid .box .bottom span{
            position: absolute;
            font-size: 18px;
            color:#6b6b6b;
            transform-origin: top left;
            transform:rotate(90deg);
        }
        main .tip .fluid .box .bottom{
            left:75%;
            padding-left: 35px;
            transform: translate(-50%,-50%);
            top:50%;
            position: absolute;
        }

        main .case{
            padding:180px 0px;
            color: #fff;
            overflow: hidden;
        }
       
        main .case .row:nth-child(1){
            float: left;
            width: 100%;
            margin-bottom: 150px;
        }
        main .case .row:nth-child(1) .box:first-child{
            width: 46%;
            float: left;
        } 
        main .case .row:nth-child(1) .box:last-child{
            width: 54%;
            float: left;
            
        }
        
        main .case .row:nth-child(1) .examples{
            font-size: 18px;
            float: left;
            width:100%;
        }
        main .case .row:nth-child(1) .examples>p{
            padding:50px 0px;
        }
        main .case .row:nth-child(1) .examples>p span{
            display: inline-block;
            line-height: 18px;
            font-weight: bold;
        }
        main .case .row:nth-child(1) .examples>p .num{
            font-size: 200px;
            line-height: 200px;
            margin-right: 30px;

        }
        main .case .row:nth-child(1) .examples ul{
            padding:30px 0px;
            float: left;
            width: 100%;
        }
        main .case .row:nth-child(1) .examples ul li{
            float: left;
            width: calc(100% / 3);
        }
        main .case .row:nth-child(1) .examples ul li .num{
            font-size: 72px;
            margin-bottom: 20px;
        }
        main .case .details{
            clear:both;
            width: 46%;
            font-size: 14px;
            position: relative;
            
        }
        main .case .details>p{
            font-size: 24px;
        }
        main .case .details>ul{
            overflow: hidden;
        }
        main .case .details>ul li{
            width: 50%;
            float:left;
            margin-top:50px;
        }
        main .case .details>ul li a{
           padding-right: 10px;
            cursor: pointer;
            display:box;
            display: -webkit-box; 
            display: -moz-box;
            display: -webkit-flex; 
            display: -moz-flex; 
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -moz-box-pack:center;
            -webkit-align-items: center;
            align-items: center;
            color: #fff;
        }
        main .case .details>ul li a .line{
            display: block;
            height: 1px;
            width: 40px;
            background: #fff;
            margin-right: 20px;
            transition: all ease .5s;
        }
        main .case .details>ul li a:hover .line{
            transform:rotate(-30deg);
        }
        main .case .details .more{
            margin-top:60px;
            color: white;
        }
        main .case .details .more .border{
            background: #fff;
        }
        main .case .swiper{
            justify-content: flex-end;
            position: relative;
            margin-top: -9.375vw;
            
        }
        main .case .swiper .swiper-button-next,
        main .case .swiper .swiper-button-prev,
        main .case .swiper .swiper-pagination-bullet{
            -webkit-tap-highlight-color: transparent;
            outline: none;
        }
        main .case .swiper #caseSwiper{
            width: calc(54% - 5vw);
            height: 770px;
            border:5px solid #fff;
            margin: initial;
        }
        main .case .swiper #caseSwiper .swiper-slide img{
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        main .case .swiper .swiper-container .swiperBtn,
        main .case .swiper .swiper-container .swiper-pagination{
            display: none;
        }
        
        main .case .swiper>.btns{
            position: absolute;
            height: 70px;
            overflow: hidden;
            bottom:-5px;
            z-index: 5;
            right: calc(54% - 5vw + 30px);
        }
        main .case .swiper>.btns>*{
            float: left;
        }
        
        main .case .swiper>.btns .swiperBtn{
            width:70px;
            height: 100%;
            background-color:#fff;
            border-radius: 5px; 
            position: initial;
            margin-top: 0px;
            background-size: 16px 25px;
        }
        main .case .swiper>.btns .swiper-button-prev{
            background-image: url(../../img/index/arrow_prev.png);
            margin-right: 5px;
        }
        main .case .swiper>.btns .swiper-button-next{
            background-image: url(../../img/index/arrow_next.png);
        }
        main .case .swiper #caseSwiper .case-pagination{
            width: 20px;
            height: 113px;
            position: absolute;
            right: 15px;
            left: initial;
            top: 0px;
            bottom: 0px;
            margin: auto;
        }
        main .case .swiper>.btns .swiper-pagination{
            width: 113px;
            height: 20px;
            position: initial;
            margin-top:25px;
            margin-left: 45px;
        }
        main .case .swiper #caseSwiper .case-pagination .swiper-pagination-bullet{
            width: 6px;
            height: 6px;
            border: 0px solid #d2d2d2;
            background: #d2d2d2;
            box-sizing: content-box;
            margin:0px;
            opacity: 1;
            display: block;
            margin-left: 7px;
            margin-left: 7px;
            cursor: pointer;
        }
        main .case .swiper>.btns .swiper-pagination .swiper-pagination-bullet{
            width: 6px;
            height: 6px;
            border: 0px solid #d2d2d2;
            background: #d2d2d2;
            box-sizing: content-box;
            margin:0px;
            opacity: 1;
            display: block;
            float: left;
            margin-top: 7px;
            margin-bottom: 7px;
            cursor: pointer;
        }
        main .case .swiper #caseSwiper .case-pagination .swiper-pagination-bullet-active{
            border-width: 7px;
            margin-left: 0px;
            margin-right: 0px;
            background: #000;
        }
        main .case .swiper>.btns .swiper-pagination .swiper-pagination-bullet-active{
            border-width: 7px;
            margin-top: 0px;
            margin-bottom: 0px;
            background: #000;
        }
        main .case .swiper #caseSwiper .case-pagination .swiper-pagination-bullet + .swiper-pagination-bullet{
            margin-top: 25px;
        }
        main .case .swiper>.btns .swiper-pagination .swiper-pagination-bullet + .swiper-pagination-bullet{
            margin-left: 25px;
        }
        main .case .swiper .title{
            position: absolute;
            right: calc(54% - 5vw + 30px);
            width: calc(46% + 5vw - 30px);
            text-align: right;
            bottom: 170px;
        }
        main .case .swiper .title .swiper-container{
            height: 120px;
            
        }
        main .case .swiper .title .line i{
            width: 40px;
            display: inline-block;
            height: 2px;
            background: #fff;
            margin-bottom: 25px;
        }
        main .case .swiper .title p{
            
            font-size: 54px;
            font-weight: bold;
            color: #e50012;
            line-height: 110%;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            white-space: normal;
            word-break: break-all;
        }
       
        main .introduce{
            padding-top:80px;
            padding-bottom:120px;
        }
        main .introduce .content{
            margin-top: 50px;
            padding-left: 300px;
        }
        main .introduce .content>*{
            width: 50%;
        }
        main .introduce .content .pic{
            min-height: 550px;
        }
        main .introduce .content .pic img{
            display: block;
        }
        main .introduce .content .txt{
            justify-content: space-between;
            flex-direction: column;
            padding-left: 40px;
            padding-right: 55px;
        }
        main .introduce .content .txt .txtBox>p:first-child{
            font-size: 36px;
        }
        main .introduce .content .txt .txtBox .line{
            display: block;
            width: 40px;
            height: 1px;
            background: #000;
            margin: 25px 0px;
        }
        main .introduce .content .txt .txtBox .txtName{
            font-size: 54px;
            font-weight: bold;
            color: #e50012;
        }
        main .introduce .content .txt .txtBox .info p{
            margin-top: 25px;
            font-size: 18px;
        }
        main .introduce .content .txt .more{
            margin-top: 60px;
        }
        
       
        main .news{
            padding-bottom: 80px;
        }
        main .news .line{
            width: 40px;
            height: 2px;
            background: #000;
            display: block;
            margin-bottom: 40px;
        }
        main .news>p{
            align-items: flex-end;
            margin-bottom: 115px;
        }
        main .news>p span{
            display: inline-block;
        }
        main .news>p span:first-child{
            font-size: 54px;
            line-height: 54px;
            margin-right: 20px;
        }
        main .news>p span:last-child{
            font-size: 36px;
        }
        main .news ul{
            overflow: hidden;
        }
        main .news ul li{
            width: 30%;
            float: left;
            cursor: pointer;
            border:3px solid transparent;
            transition: all .5s ease;
        }
        main .news ul li + li{
            margin-left: 5%;
        }
        main .news ul li a{
            display: block;
        }
        main .news ul li .pic{
            height: 210px;
        }
        main .news ul li .pic img{
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        main .news ul li .content{
            margin-top: 30px;
            padding-right: 10px;
            font-size: 14px;
        }
        main .news ul li .content h5{
            font-size: 18px;
            margin-bottom: 20px;
            min-height: 50px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            white-space: normal;
            word-break: break-all;
        }
        main .news ul li .content .txt .date{
            color: #9d9d9d;
            padding-bottom: 20px;
            display: block;
        }
        main .news ul li .content .txt p{
            min-height: 80px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 4;
            white-space: normal;
            word-break: break-all;
        }
        main .news ul li:hover{
            border-color: black;
            padding:35px 25px;
        }
        main .news ul li:first-child .content .txt{
            height: 0px;
            overflow: hidden;
            transition: all ease .5s;
        }
        main .news ul li:first-child .moreInfo{
            color: #e50012;
            font-weight: bold;
            transition: all ease .5s;
        }
        main .news>.more{
            display: block;
            margin: 0px auto;
            margin-top:115px;
        }
        

